<template>
  <div>
    <RoleSearch :search-params="searchParams" @search="handleSearch" @resetSearch="resetSearch" />
    <RoleTable
      :table-data="tableData"
      :loading="loading"
      :total="total"
      :current-page="page"
      :page-size="pageSize"
      @pageChange="handlePageChange"
    />
  </div>
</template>
<script>
  import RoleSearch from './components/RoleSearch.vue'
  import RoleTable from './components/RoleTable.vue'
  import { pageList } from '@/api/role'
  export default {
    components: {
      RoleSearch,
      RoleTable
    },
    data() {
      return {
        title: '', // 分配角色弹窗显示的title
        tableData: [],
        total: 0,
        page: 1,
        pageSize: 5,
        loading: false,
        searchParams: {
          roleName: '',
          roleKey: '',
          status: 'false',
          startTime: '',
          endTime: ''
        }
      }
    },
    mounted() {
      // 初始化时候调用分页方法
      this.fetchData(this.page, this.pageSize, this.searchParams)
    },
    methods: {
      async fetchData(page, pageSize, searchParams) {
        // 开启loading效果
        this.loading = true
        const respone = await pageList(page, pageSize, searchParams)
        this.tableData = respone.list
        this.total = respone.total
        this.page = respone.pageNum
        this.pageSize = respone.pageSize
        this.loading = false
      },
      /**
       * 提供给RoleTable.vue组件使用，当子组件修改了当前页码或者是每页条数的时候触发这个事件方法
       * @param currentPage
       * @param pageSize
       */
      async handlePageChange(currentPage, pageSize) {
        this.page = currentPage
        this.pageSize = pageSize
        await this.fetchData(this.page, this.pageSize, this.searchParams)
      },
      /**
       * 提供给RoleSearch.vue组件使用，当子组件参数在子组件中提交的时候，触发这个事件方法
       * @param searchParams
       */
      async handleSearch(searchParams) {
        this.searchParams = searchParams
        await this.fetchData(this.page, this.pageSize, this.searchParams)
      },
      /**
       * 提供的RoleSearch.vue组件重置表单的内容
       */
      resetSearch() {
        this.searchParams = {
          roleName: '',
          roleKey: '',
          status: 'false',
          startTime: '',
          endTime: ''
        }
      }
    }
  }
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
